<template>
	<div class="cr-con">
		<div class="cr-group">
			<div class="cr-item" v-for="(item, index) in list" :key="index">
				<div class="icon">
					<div class="arc"><img src="../images/pic-xuan.png" alt="" /></div>
					<img :src="item.icon" alt="" />
				</div>
				<div class="right">
					<div class="label">{{ item.name }}</div>
					<div class="value">
						<span v-if="index!=1">{{ jisuan(item.value)}}</span>
						<span v-else>{{ item.value}}</span>
						{{ item.unit }}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		onMounted,
		nextTick
	} from 'vue';
	import {
		getIndexTrafficRunInfo
	} from '@/api/home';
	export default defineComponent({
		setup(props, {
			emit
		}) {
			const state = reactive({
				list: [{
						name: '平均速度',
						value: 0,
						icon: require('../images/icon-pjsd.png'),
						unit: 'km/h',
					},
					{
						name: '平均拥堵指数',
						value: 0,
						icon: require('../images/icon-ydzs.png'),
					},
					{
						name: '平均拥堵里程',
						value: 0,
						icon: require('../images/pic-ydlc.png'),
						unit: 'km',
					},
					{
						name: '平均拥堵时长',
						value: 0,
						icon: require('../images/pic-ydsc.png'),
						unit: 'h',
					},
				],
			});
			onMounted(async () => {
				const data = await getIndexTrafficRunInfo();
				console.log(data, '首页数据');
				state.list[0].value = data.ydSpeedTotal;
				state.list[1].value = data.ydIndexTotal;
				state.list[2].value = data.ydLengthTotal;
				state.list[3].value = data.ydTimeTotal;
			});
			return {
				...toRefs(state),
				jisuan(val) {
					return parseFloat(val).toFixed(1);
				},
			};
		},
	});
</script>
<style scoped lang="less">
	.cr-con {
		width: 100%;
		margin-top: -8px;
		padding: 2vw 1vw 1vw;
		height: 33vh;
		background: url('@/assets/images/home/case-2.png') no-repeat;
		background-size: 100% 100%;

		.cr-group {
			display: flex;
			flex-wrap: wrap;
			height: 100%;

			.cr-item {
				width: 50%;
				height: 50%;
				display: flex;
				align-items: center;

				.icon {
					width: 60px;
					height: 60px;
					position: relative;
					margin-right: 1.0416vw;

					.arc {
						position: absolute;
						width: 72px;
						height: 72px;
						left: -6px;
						top: -6px;
						animation: acrScale 2s, acrRotate 4s linear infinite;
					}

					img {
						width: 100%;
						height: 100%;
					}
				}

				.label {
					color: rgba(255, 255, 255, 0.7);
				}

				.value span {
					font-size: 28px;
				}
			}
		}
	}

	@keyframes acrScale {
		from {
			transform: scale(1);
		}

		to {
			transform: scale(2);
		}
	}

	@keyframes acrRotate {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
</style>